<template>
  <div class="company-list">
    <div class="scroll-list" v-if="dataList.length" @scroll="handleScroll">
      <div
        class="company-item box-border"
        v-for="item in dataList"
        :key="item.id"
      >
        <div class="company-logo">
          <img :src="handleLogoUrl(item.logoUrl)" />
        </div>
        <div class="company-info">
          <div class="name-info">
            <span class="company-name text-ellipsis">
              {{ item.name }}
            </span>
            <span class="company-region">{{ item.locationRegionName }}</span>
          </div>
          <div class="tag-list">
            <span v-for="(itemTag, _index) in item.oldTags" :key="_index">
              {{ itemTag }}
            </span>
          </div>
          <div class="info-line">
            <div class="info-item">
              <span class="info-item-name">成立日期：</span>
              <span class="info-item-value">
                {{ item.regTime ? formatDateStr(item.regTime) : '-' }}
              </span>
            </div>
            <div class="info-item">
              <span class="info-item-name">注册资本：</span>
              <span class="info-item-value">
                {{ item.regCapitalString ? item.regCapitalString : '-' }}
              </span>
            </div>
          </div>
          <div class="info-line">
            <div class="info-item">
              <span class="info-item-name">所属行业：</span>
              <span class="info-item-value text-ellipsis">
                {{ item.tradeName ? item.tradeName : '-' }}
              </span>
            </div>
            <div class="info-item">
              <span class="info-item-name">官网：</span>
              <span
                class="info-item-value text-ellipsis"
                :class="item.website ? 'website' : ''"
                @click="handleToWebsite(item)"
              >
                {{ item.website ? item.website : '-' }}
              </span>
            </div>
          </div>
        </div>
      </div>
      <div class="finished-text"></div>
    </div>
    <div class="empty-container" v-else>
      <Empty />
    </div>
  </div>
  <JumpWarning :linkUrl="websiteUrl" ref="JumpWarningRef"></JumpWarning>
</template>
<script setup>
import { ref, defineProps, watch, onMounted } from 'vue';
import { formatDateStr, tagsEnum } from '@/utils/industryUtils';
import antiShake from '@/utils/antiShake.js'; // 引入防抖函数
import { getInstudryComLists } from '@/api/industryMap';
import JumpWarning from '@/views/industryMap/components/JumpWarning.vue';
import companyLogo from '@/assets/images/industryMap/companyLogo.png';
import Empty from '@/components/Empty.vue';

const props = defineProps({
  industryId: {
    type: String,
    default: '',
  },
});

const loading = ref(false);
const finished = ref(false); //加载完成
const pageNo = ref(1);
const pageSize = ref(10);
const dataList = ref([]);

const getDataList = async () => {
  loading.value = true;
  const params = {
    industryId: props.industryId,
    pageNum: pageNo.value,
    pageSize: pageSize.value,
  };
  const res = await getInstudryComLists(params);
  if (res.code === 200) {
    const data = res.rows || [];
    data.forEach((item) => {
      if (item.oneLevelTagList && item.oneLevelTagList.length) {
        item.oldTags = item.oldTags.concat(item.oneLevelTagList);
      }
      if (item.oldTags && item.oldTags.length) {
        item.oldTags = item.oldTags
          .filter((item) => tagsEnum.includes(item))
          .sort((a, b) => tagsEnum.indexOf(a) - tagsEnum.indexOf(b));
      }
      item.oldTags = [...new Set(item.oldTags)];
    });
    pageNo.value++;
    dataList.value = [...dataList.value, ...data];
    finished.value = dataList.value.length >= res.total || !data.length;
  } else {
    finished.value = true;
  }
  loading.value = false;
};

const websiteUrl = ref('');
const JumpWarningRef = ref();
const handleToWebsite = (item) => {
  if (!item.website) {
    return;
  }
  websiteUrl.value = item.website;
  if (
    websiteUrl.value.indexOf('http://') == -1 &&
    websiteUrl.value.indexOf('https://') == -1
  ) {
    websiteUrl.value = 'https://' + websiteUrl.value;
  }
  JumpWarningRef.value.init();
};

const handleLogoUrl = (url) => {
  return !url || /tianyancha/i.test(url) ? companyLogo : url;
};

const handleScroll = antiShake(() => {
  const listElement = document.querySelector('.scroll-list');
  if (listElement) {
    const { scrollTop, scrollHeight, clientHeight } = listElement;
    if (scrollTop + clientHeight >= scrollHeight - 10 && !finished.value) {
      getDataList();
    }
  }
}, 300);

watch(
  () => props.industryId, // 监听 props.industryId 的变化
  (nawVal) => {},
  { deep: true }
);
onMounted(() => {
  getDataList();
});
</script>

<style lang="scss" scoped>
.company-list {
  width: 100%;
  height: 100%;
  padding-top: 40px;
  box-sizing: border-box;
  .empty-container {
    height: 100%;
    padding-bottom: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }
}
.scroll-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 20px;
  width: 100%;
  height: 100%;
  overflow-y: auto;
}
.company-item {
  position: relative;
  display: flex;
  padding: 32px;
  padding-left: 24px;
  background: #ffffff;
  border-radius: 28px;
  .company-logo {
    width: 96px;
    height: 96px;
    background: #ffffff;
    border: 1px solid #dee8f4;
    border-radius: 50%;
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }
  .company-info {
    flex: 1;
    width: 1px;
    margin-left: 20px;
    .name-info {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .company-name {
        flex: 1;
        font-weight: bold;
        font-size: 28px;
        color: #222222;
      }
      .company-region {
        font-weight: 400;
        font-size: 22px;
        color: #999999;
        line-height: 22px;
        white-space: nowrap;
      }
    }
    .info-line {
      display: flex;
      margin-top: 20px;
      .info-item {
        margin-right: 68px;
        font-weight: 400;
        font-size: 24px;
        line-height: 24px;
        display: flex;
        align-items: center;
        max-width: 45%;
        &:last-child {
          margin-right: 0;
        }
        .info-item-name {
          color: #999999;
        }
        .info-item-value {
          color: #555555;
          flex: 1;
          position: relative;
        }
        .website {
          padding-left: 28px;
          color: #0b6eff;
          &::after {
            content: '';
            width: 24px;
            height: 24px;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);

            background: url('@/assets/images/industryMap/website.png') no-repeat;
            background-size: 100% 100%;
          }
        }
      }
    }
    .tag-list {
      width: 100%;
      display: flex;
      overflow: hidden;
      overflow-x: auto;
      &::after {
        content: '';
        height: 48px;
        background: #e5e5e5;
      }

      span {
        white-space: nowrap;
        padding: 6px 10px;
        margin-right: 12px;
        font-weight: 400;
        font-size: 18px;
        line-height: 18px;
        border-radius: 6px;
        margin-top: 16px;
        &:nth-child(1n) {
          color: #6194fc;
          background: #eff5ff;
          border: 1px solid #d0e0ff;
        }
        &:nth-child(2n) {
          color: #a0ca5a;
          background: #f3fff2;
          border: 1px solid #bcec96;
        }
        &:nth-child(3n) {
          color: #d1ae6f;
          background: #fcf8f3;
          border: 1px solid #efe0c8;
        }
        &:nth-child(4n) {
          color: #bf84d5;
          background: rgba(245, 237, 248, 0.6);
          border: 1px solid #eddcf3;
        }
        &:nth-child(5n) {
          color: #61bcd2;
          background: #eef8fa;
          border: 1px solid #d6f0f7;
        }
      }
    }
  }
}
.finished-text {
  grid-column-start: span 2;
}
.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
// 设置边框
.box-border::before {
  content: '';
  position: absolute;
  inset: 0px;
  border-radius: 42px;
  padding: 4px;
  mask-composite: exclude;
  pointer-events: none;
  -webkit-mask: linear-gradient(
    180deg,
    rgba(255, 255, 255, 1),
    rgba(214, 233, 255, 1)
  );
  mask: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(214, 233, 255, 1));
  -webkit-mask-composite: xor;
  z-index: -1;
}
.tag-list {
  &::-webkit-scrollbar {
    display: none;
  }
}
</style>
